import * as three from 'three'
// import * as three from 'three'

const scene = new three.Scene();
const width = window.innerWidth;
const height = window.innerHeight;
const renderer = new three.WebGLRenderer()
document.body.appendChild(renderer.domElement)
renderer.domElement.addEventListener('mousedown', function () {
    const pos = calculatePosition();
    console.log('mousedown')
    createjs.Tween.get(camera.position).to({x: pos.x, y: pos.y, z: pos.z}, 500)
})

renderer.setClearColor(0xffffff)
renderer.setSize(width, height)

const camera = new three.PerspectiveCamera(75, width / height, 0.1, 1000);
camera.position.set(5, 0, 0)
camera.lookAt(scene.position);

const geometry = new three.BoxGeometry(1, 1, 1);
const material = new three.MeshBasicMaterial({color: 0x55ffff})
const cube = new three.Mesh(geometry, material)
scene.add(cube)

renderer.render(scene, camera);

const INCREASING = 9;
let angle = 0;
const RADIUS = 5;

function calculatePosition() {
    angle += INCREASING
    return {x: RADIUS * Math.cos(angle), y: 0, z: RADIUS * Math.sin(angle)}
}

function render() {
    // const pos = calculatePosition();
    // camera.position.set(pos.x, pos.y, pos.z);
    camera.lookAt(scene.position)
    renderer.render(scene, camera);
    requestAnimationFrame(render)
}

render();